<template>
    <div class="emotion-box" :style="{ height: height + 'px' }">
        <div class="emotion-item" v-for="(item, index) in list" :key="index" @click="clickHandler(item)">
            <img class="ly-static-emotion" :src="'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/' + index + '.gif'">
        </div>
    </div>
</template>

<script>
import $emo from './constEmo.js'
export default {
    props: {
        height: {
            type: Number,
            default: 300,
        }
    },
    data() {
        return {
            list: $emo.list
        }
    },
    methods: {
        clickHandler(i) {
            let emotion = `#${i};`
            this.$emit('emotion', emotion)
        }
    },
}
</script>
<style scoped>
    .emotion-box {
        margin: 0 auto;
        width: 100%;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .emotion-box:after{
        content:'';
        flex: 1;
    }
    .emotion-item{
        width: 40px;
        height: 40px;
        position: relative;
        z-index: 1;
        margin: 0 auto 15px;
        padding: 0 5px;
    }
    .ly-static-emotion{
        width: 30px;
        height: 30px;
        margin: 0 5px 15px;
        display: block;
    }
</style>
